<template>
  <el-card class="zone" shadow="never">
    <el-row
      class="category"
      v-for="(row, idx) in zoneInfo"
      :row="row"
      :index="idx"
    >
      <el-col v-if="flag == true || idx < 2" class="title" :span="2">
        <div>{{ row.label }}:</div>
      </el-col>
      <el-col
        v-if="flag == true || idx < 2"
        class="context"
        :span="row.name == 'startClassDate' ? 9 : 22"
      >
        <el-date-picker
          v-model="dateTime"
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          v-if="row.name == 'startClassDate'"
          @change="dateChange(row)"
        />
        <div
          class="selected"
          v-else
          :class="item.flag ? 'active' : ''"
          v-for="(item, num) in row.choises"
          :key="item.id"
          @click="params({ item, row, index: num, idx })"
        >
          {{ item.name }}
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { defineProps, ref, defineEmits } from "vue";
import type { zoneList, choise } from "@/api/course/course";
import lodash from "lodash";
import moment from "moment";
import { ElMessage } from "element-plus";
const emits = defineEmits<{
  (e: "pageInit", data: any): void;
}>();
// const props = defineProps<{
//   zoneInfo: zoneList[];
// }>();
const zoneInfo = ref([
  {
    choises: [
      {
        name: "古典舞",
        id: "402881ed649d628e01649d636ea7005b",
      },
      {
        name: "中国舞",
        id: "ff80808167bef94f0167bf6f6e0a1fd2",
      },
      {
        name: "爵士舞",
        id: "402881ed649d628e01649d636ea70057",
      },
      {
        name: "舞蹈",
        id: "ff80808167cb37250167cc06bbec356a",
      },
      {
        name: "民族舞",
        id: "402881ed649d628e01649d636ea7005a",
      },
      {
        name: "流行热舞",
        id: "402881ed649d628e01649d636ea80065",
      },
      {
        name: "舞蹈教学",
        id: "ff80808167d9e1280167e45526397383",
      },
      {
        name: "现代舞",
        id: "402881ed649d628e01649d636ea70058",
      },
      {
        name: "原创编舞",
        id: "ff80808167d9dd620167e457f899789a",
      },
      {
        name: "成人舞蹈",
        id: "ff8080816960e987016962b2af0f5323",
      },
      {
        name: "街舞",
        id: "402881ed649d628e01649d636ea60056",
      },
      {
        name: "少儿舞蹈",
        id: "402881ed649d628e01649d636ea80067",
      },
      {
        name: "舞蹈学习",
        id: "ff8080816821555e016827cff049029e",
      },
      {
        name: "热门舞蹈",
        id: "ff808081683f378701687690e06e66ac",
      },
      {
        name: "中国风",
        id: "ff80808167c026c90167c1fbde74258b",
      },
      {
        name: "韩舞",
        id: "ff80808167bec85c0167bee5673804a8",
      },
    ],
    formType: "multiple_select",
    label: "兴趣技能",
    name: "avocation",
    style: "smallRect",
    valueType: "JsonArray",
  },
  {
    choises: [
      {
        name: "视频",
        id: "video",
      },
      {
        name: "图片",
        id: "photo",
      },
      {
        name: "文章",
        id: "article",
      },
    ],
    formType: "multiple_select",
    label: "内容格式",
    name: "contentType",
    style: "smallRect",
    valueType: "JsonArray",
  },
]);
const flag = ref(false);
const leng = () => {
  flag.value = !flag.value;
  emits("pageInit", flag);
};

const initForm = () => {
  return {
    filterInfo: [],
  };
};
const initZone = () => {
  return {
    filterCode: "",
    filterValue: [],
    // 自己添的
    avocationNames: [],
  };
};
const zonelis = ref();
const zoneForm = ref(initForm());
const params = ({ item, row, index, idx }: any) => {
  let codeList = zoneForm.value?.filterInfo?.find(
    (item) => row.name == item?.filterCode
  );
  console.log(codeList);
  if (codeList && item.length != 2) {
    let value = codeList.filterValue.findIndex((lis) => lis == item.id);
    if (value > -1) {
      codeList.filterValue.splice(value, 1);
      // 自己添的
      codeList.avocationNames.splice(value, 1);
      let a = zoneForm.value.filterInfo.findIndex(
        (info) => info.filterValue.length == 0
      );
      if (a > -1) {
        zoneForm.value.filterInfo.splice(a, 1);
      }
    }
    if (value < 0) {
      if (codeList.filterValue.length > 2) {
        ElMessage.warning("不能大于3个");
        return;
      }
      codeList.filterValue.push(item.id);
      codeList.avocationNames.push(item.name);
    }
  } else {
    console.log(item.length);
    zonelis.value = initZone();
    if (item.length == 2) {
      zonelis.value.filterCode = row.name;
      zonelis.value.filterValue = item;

      console.log("2", zonelis.value);
      zoneForm.value.filterInfo.splice(0, 1, zonelis.value as never);
    } else {
      zonelis.value.filterCode = row.name;
      zonelis.value.filterValue.push(item.id);
      if (zonelis.value.filterCode == "avocation") {
        // 自己添的
        zonelis.value.avocationNames.push(item.name);
      }
      zoneForm.value.filterInfo.push(lodash.cloneDeep(zonelis.value) as never);
    }
  }
  console.log("old", zoneForm.value);
  emits("pageInit", { data: zoneForm.value });
  console.log(zonelis.value);
  console.log(zoneForm.value);
  if (!(item.length == 2)) {
    item.flag = !item.flag;
  }
};
const dateTime = ref([]);
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
]);
const dateChange = (row: any) => {
  let time = dateTime.value.map((item: string) => {
    return moment(item).format("x");
  });
  params({ item: time, row });
};
</script>
<!--时间选择器样式-->
<style lang="less" scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
</style>
<style lang="less" scoped>
.zone {
  width: 1200px;
  padding: 20px 0;
  margin-top: 10px;
  background-color: #f5f7f9;
  border: none;
  .category {
    width: 100%;
    margin-left: 15px;
    display: flex;
    align-items: center;
    .title {
      color: #b1b5c1;
    }
    .context {
      width: 1045px;
      display: flex;
      padding: 7px 13px;
      align-items: center;
      flex-wrap: wrap;
    }
    .selected {
      font-size: 14px;
      color: #7d8090;
      text-align: center;
      margin-top: 10px;
      margin-right: 10px;
      width: 80px;
      border-radius: 5px;
    }
    .active {
      background-color: #fa5e9d;
      color: white;
    }
  }
  .footer {
    width: 100%;
    display: flex;
    justify-content: center;
    color: #fa5e9d;
  }
}
</style>
